<!--<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<c:set var="path" value="${pageContext.request.contextPath}" />-->
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>供货方品种管理</title>

<link rel="stylesheet" type="text/css"
	href="/Medical_Instrument/statics/h-ui/css/H-ui.min.css" />
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

#loadingModal {
	position: absolute;
	top: 40%;
	left: 25%;
	transform: translateX(-50%) translateY(-50%);
}

.loadingModal {
	margin: 170px 200px;
}

.div_head {
	font-weight: 500;
	text-align: center;
	padding: 20px 0 60px 0;
	border-bottom: 1px solid #92A5C7;
	background: linear-gradient(#F3F8FF, #E2EEFF, #BCD9FF);
}

.div_head>div {
	float: left;
	text-align: left;
	margin-left: 5px;
}

.div_head div>span {
	display: block;
	width: 100%;
	height: 25px;
	margin-bottom: 5px;
}

.div_head span input {
	zoom: 120%;
}

.buttons {
	font-size: 14px;
	border-radius: 10px;
	border: 1px solid #92A5C7;
	padding: 4px;
	text-align: center;
	background: linear-gradient(#DEECFF, #CAE1FF, #B6D6FF);
	color: #1E90FF;
	outline: 0;
}

.buttons:hover {
	cursor: pointer;
	background: linear-gradient(#B6D6FF, #CAE1FF, #DEECFF);
}

.div_left {
	width: 1490px;
	height: 550px;
	overflow: auto;
	border: 5px solid #1E90FF;
	padding: 20px;
	margin: 30px 0 30px 30px;
	display: inline-block;
}

.div_right {
	display: inline-block;
	width: 100px;
	vertical-align: top;
	margin: 50px 0 0 20px;
}

.div_right button {
	margin-bottom: 10px;
}

.mar-t {
	margin: 0 10px;
	font-family: "宋体";
	font-size: 15px;
}

#breed_add input {
	margin-right: 20px;
	width: 145px;
	height: 23px;
	border: 2px solid #77BCFF;
	text-indent: 10px;
	font-size: 13px;
}

.modal-body table tr td div {
	display: inline;
}

.modal-body table tr td div span {
	font-size: 18px;
}

.back-color {
	background: #f8a796;
}
</style>
<script type="text/javascript"
	src="/Medical_Instrument/statics/lib/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>

	<div class="div_head">
		<h2>供货方品种管理</h2>
		<div>
			<span><input type="checkbox" checked="checked" /> <span
				class="mar-t">供应商</span>
				<button class="buttons"
					style="width: 50px; height: 25px; margin-top: -5px;"
					data-toggle="modal" data-target="#providerlist"
					onclick="getProviderList('query')">...</button> <span> <!--此处放选中的供应商信息-->
			</span> </span> <span><input type="checkbox" checked="checked" /> <span
				class="mar-t">商&nbsp;品</span>
				<button class="buttons"
					style="width: 50px; height: 25px; margin-top: -5px;"
					data-toggle="modal" data-target="#productadd" onclick="getallvarieties('query')">...</button> <span>
					<!--此处放选中的商品信息--> </span> </span>
		</div>
	</div>
	<div class="div_body">
		<div class="div_left">
			<table id="supplier_var_table" class="table table-border table-bordered table-bg table-hover user-defined-class">
				<thead>
					<tr class="text-c">
						<th>供应商名称</th>
						<th>供货人员</th>
						<th>品名</th>
						<th>生产厂家</th>
						<th>规格</th>
						<th>单位</th>
						<th>产品注册证号/备案凭证编号</th>
						<th>备注</th>
					</tr>
				</thead>
				<tbody>
				</tbody>
			</table>
		</div>
		<div class="div_right">
			<button class="buttons" style="width: 100px;" data-toggle="modal"
				data-target="#breed_add">新增</button>
			<button class="buttons" style="width: 100px;">删除</button>
		</div>
	</div>

	<!--新增供货方品种 -->
	<div class="modal inmodal fade" id="breed_add" tabindex="-1"
		role="dialog" aria-hidden="true" style="z-index: 50;overflow: scroll;">
		<div class="modal-dialog modal-lg loadingModal">
			<div class="modal-content" style="width: 150%;">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
					<h4 class="modal-title" style="text-align: center;font-size: 26px;">新增供货方品种</h4>
				</div>
				<div class="modal-body">
					<form style="font-size: 16px;">
						<table style="border-collapse: separate; border-spacing:30px 20px" >
							<tr style="display: inline;">
								<td style="float: left;margin-left: 25px;">
									<div>
										<input type="button" class="buttons"
											style="width: 65px; height: 30px; margin-top: -5px;display: inline;"
											data-toggle="modal" data-target="#providerlist" value="供应商" onclick="getProviderList('add')"/>
										<input type="text" style="width:550px;" id="enterpriseName" placeholder="供应商名称" readonly="readonly" required="required"/>
									</div>
								</td>
							</tr>
							<tr style="display: inline;">
								<td style="float: left;margin-left: 80px;">
									<div style="font-size: 16px;">
										<span>供货方人员</span> 
										<select id="people"
											style="width: 150px;height: 30px;font-size: 16px;">
										</select>
									</div>
								</td>

							</tr>
							<tr class="especially_tr">
								<td style="float: left;margin-left: 50px;">
									<div>
										&nbsp;&nbsp;<span>备注</span> <input type="text"
											style="width: 545px;margin-left: 20px;" />
									</div>
								</td>
							</tr>
							<tr class="especially_tr">
								<td>
									<div>
										<input class="buttons" type="button"
											style="width: 85px; height: 30px;" value="添加商品"
											data-toggle="modal" data-target="#productadd" onclick="getallvarieties('add')"/>
									</div>
								</td>
							</tr>
							<tr class="especially_tr">
								<td>
									<div
										style="border: 5px solid #1E90FF; display: block; padding: 20px;height: 500px;">
										<table id="sublist"
											class="table table-border table-bordered table-bg providerlist2 dataTable table-hover user-defined-class">
											<thead>
												<tr class="text-c">
													<th>品名</th>
													<th>规格</th>
													<th>单位</th>
													<th>生产厂家</th>
													<th>备注</th>
												</tr>
											</thead>
											<tbody>
											</tbody>
										</table>
									</div>
								</td>
							</tr>
						</table>
					</form>
				</div>

				<div class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary">确定</button>
				</div>
			</div>
		</div>
	</div>

	<!--
        	作者：offline
        	时间：2018-09-07
        	描述：供应商列表弹框
        -->
	<div id="providerlist" class="modal fade bs-example-modal-lg">
		<div class="modal-dialog " id="loadingModal">
			<div class="modal-content" style="margin-top: 100px; height: 700px; width: 250%;">
				<div class="modal-header">
					<h2 class="modal-title" style="text-align: center;font-size: 20px;">供应商列表</h2>
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
				</div>
				<div class="modal-body" style="height: 560px;">
					<div class="mt-20">
						<input type="hidden" id="provider" value="">
						<table id="providerList"
							class="table table-border table-bordered table-hover table-bg user-defined-class">
							<thead>
								<tr class="text-c">
									<th>供方编号</th>
									<th>名称</th>
									<th>全称</th>
									<th>地址</th>
									<th>联系人</th>
									<th>联系电话</th>
									<th>备注</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
				<div class="modal-footer" >
					<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="providerconfirm">确定</button>
				</div>
			</div>

		</div>

	</div>

	<!--
      	作者：offline
      	时间：2018-09-08
      	描述：商品选择弹框
      -->
	<div id="productadd" class="modal fade bs-example-modal-lg">
		<div class="modal-dialog " id="loadingModal">
			<div class="modal-content" style="height: 600px; width: 250%;">
				<div class="modal-header">
					<h2 class="modal-title" style="text-align: center;font-size: 20px;">选择商品</h2>
					<button type="button" class="close" data-dismiss="modal">
						<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
					</button>
				</div>
				<div class="modal-body div_table">
					<div class="mt-20"
						style="border: 4px solid #1E90FF;width:1400px;padding: 20px;overflow-x: auto; height: 400px;">
						<input type="hidden" id="choiceDML" value=""/>
						<table id="choice"
							class="table table-border table-bordered table-hover table-bg product user-defined-class"
							style="width: 1500px;">
							<thead>
								<tr class="text-c">
									<th>商品编号</th>
									<th>输入码</th>
									<th>品名</th>
									<th>生产厂家</th>
									<th>规格</th>
									<th>单位</th>
									<th>零售价</th>
									<th>批发价</th>
									<th>型号</th>
									<th>产品注册证号/备案凭证编号</th>
									<th>条码</th>
								</tr>
							</thead>
							<tbody>
							</tbody>
						</table>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
					<button type="button" class="btn btn-primary" id="goodsconfirm">确定</button>
				</div>
			</div>

		</div>

	</div>

	<script type="text/javascript"
		src="/Medical_Instrument/statics/lib/jquery/1.9.1/jquery.min.js "></script>
	<script type="text/javascript"
		src="/Medical_Instrument/statics/lib/layer/2.4/layer.js "></script>
	<script type="text/javascript"
		src="/Medical_Instrument/statics/h-ui/js/H-ui.min.js "></script>
	<script type="text/javascript"
		src="/Medical_Instrument/statics/h-ui.admin/js/H-ui.admin.js "></script>

	<script type="text/javascript"
		src="/Medical_Instrument/statics/lib/My97DatePicker/4.8/WdatePicker.js "></script>
	<script type="text/javascript"
		src="/Medical_Instrument/statics/lib/datatables/1.10.0/jquery.dataTables.min.js "></script>
	<script type="text/javascript"
		src="/Medical_Instrument/statics/lib/laypage/1.2/laypage.js "></script>
	<script type="text/javascript"
		src="/Medical_Instrument/statics/js/gsp/supplier_var_manage/table.js"></script>
	<script type="text/javascript"
		src="/Medical_Instrument/statics/js/gsp/supplier_var_manage/buttons.js"></script>
	<script type="text/javascript ">
			$(function() {
				$('.providerlist1').dataTable({
					"aaSorting": [
						[0, "desc"]
					], //默认第几个排序
					"bStateSave": true, //状态保存
					"aoColumnDefs": [
						//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
						{
							"orderable": false,
							"aTargets": [0, 1, 2, 3, 4, 5, 6]
						} // 制定列不参与排序
					]
				});

				$('.providerlist2').dataTable({
					"aaSorting": [
						[0, "desc"]
					], //默认第几个排序
					"bStateSave": true, //状态保存
					"aoColumnDefs": [
						//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
						{
							"orderable": false,
							"aTargets": [0, 1, 2, 3, 4]
						} // 制定列不参与排序
					]
				});

				$('.product').dataTable({
					"aaSorting": [
						[0, "desc"]
					],
					"bStateSave": true, 
					"aoColumnDefs": [
						//{"bVisible": false, "aTargets": [ 3 ]} 
						{
							"orderable": false,
							"aTargets": [1, 2, 3, 4, 5]
						} 
					]
				});
				
				$('.user-defined-class tbody').on('click', 'tr', function() {
					if ($(this).hasClass('selected')) {
						$(this).removeClass('selected');
						$('.especially_tr').removeClass('selected');
					} else {
						$('.user-defined-class tr.selected').removeClass('selected');
						$(this).addClass('selected');
						$('.especially_tr').removeClass('selected');
					}
				});

				$('#DataTables_Table_0').removeClass("dataTable");
			});
		</script>
</body>

</html>